前幾天我們學習到怎麼去建立不同布局，那麼今天我們來學習怎麼在同一個Activity中作布局切換。

一樣先上圖

Activity

class MainActivity : AppCompatActivity() {
    lateinit var gridLayoutManager: GridLayoutManager
    lateinit var linearLayoutManager: LinearLayoutManager
    lateinit var staggeredGridLayoutManager: StaggeredGridLayoutManager
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        switchLayout(1)

    }
    override fun onCreateOptionsMenu(menu: Menu?): Boolean {
        menuInflater.inflate(R.menu.menu, menu)
        return super.onCreateOptionsMenu(menu)
    }
    override fun onOptionsItemSelected(item: MenuItem?): Boolean {
        when(item!!.itemId ) {
            R.id.menu_list -> {
                switchLayout(1)
                return true
            }
            R.id.menu_grid ->  {
                switchLayout(2)
                return true
            }

            R.id.menu_Staggered->  {
                switchLayout(3)
                return true
            }
        }

        return super.onOptionsItemSelected(item)
    }

    private fun switchLayout(mode :Int) {
        when(mode){
            1 ->{
                linearLayoutManager = LinearLayoutManager(this)
                recycleview_main.layoutManager= linearLayoutManager //預設
            }
            2->{
                gridLayoutManager = GridLayoutManager(this, 2)
                recycleview_main.layoutManager=gridLayoutManager
            }
            3->{
                staggeredGridLayoutManager = StaggeredGridLayoutManager(3,StaggeredGridLayoutManager.VERTICAL)
                recycleview_main.layoutManager=staggeredGridLayoutManager
            }
        }
        val adapter = SwitchLayoutAdapter(this, SwitchData.defaultList)
        recycleview_main.adapter = adapter
        adapter.notifyItemRangeChanged(0, adapter.getItemCount())
    }
}

這邊動作是點選上方menu按鈕作LayoutManager切換
透過switchLayout來為recycleview_main.layoutManager替換不同的layoutManager

Adapter

class SwitchLayoutAdapter(
    private val context: Context,
    private val dataList: MutableList<SwitchData>
) :
    RecyclerView.Adapter<SwitchLayoutAdapter.ViewHolder>() {
    var layoutType=1
    var mContext :Context
    init {
        mContext=context
    }
    override fun getItemViewType(position: Int): Int {
        return layoutType
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        when(viewType){
            1->{
                var view =  LayoutInflater.from(parent.context).inflate(R.layout.recycleview_listview_layout, parent, false)
                return ViewHolder(view, viewType)
            }
            2->{
                var view =  LayoutInflater.from(parent.context).inflate(R.layout.recycleview_gridview_layout, parent, false)
                return ViewHolder(view, viewType)
            }
            else->{
                var view =  LayoutInflater.from(parent.context).inflate(R.layout.recycleview_gridview_layout, parent, false)
                return ViewHolder(view, viewType)
            }
        }
    }

    override fun getItemCount(): Int {
        return dataList.size
    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        val item = dataList[position]
        holder?.bindModel(item)
    }
    inner class ViewHolder(itemView: View, var viewType:Int) : RecyclerView.ViewHolder(itemView){
        var nameTextView: TextView? = null
        var likeTextView: TextView? = null
        var commentTextView: TextView? = null

        fun bindModel(item: SwitchData){
            var imageView: ImageView? = null
            when(viewType){
                1 -> {
                    imageView = itemView.findViewById(R.id.iv_Large)
                    nameTextView = itemView.findViewById(R.id.tv_nameLarge)
                    likeTextView = itemView.findViewById(R.id.tv_like)
                    commentTextView = itemView.findViewById(R.id.tv_comment)
                }
                2 ->{
                    imageView = itemView.findViewById(R.id.iv_small)
                    nameTextView = itemView.findViewById(R.id.tv_namesmall)
                }
                3 ->{
                    imageView = itemView.findViewById(R.id.iv_small)
                    nameTextView = itemView.findViewById(R.id.tv_namesmall)
                }
            }

            Glide.with(mContext).load(item.image).into(imageView!!)
            nameTextView?.setText(item.name)
            likeTextView?.setText("Likes: ${item.like}")
            commentTextView?.setText("comments: ${item.comment}")
        }
    }
}

透過getItemViewType取得ViewType之後在onCreateViewHolder選擇View切換
原本的ViewType是用來判斷傳入資料的不同型態，這邊被我們用來判斷傳入的layout型態。

所以在override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder
這邊的viewType判斷就用來作viewholder的view傳入對象的判斷依據。
之後在 ViewHolder的Bind時，根據不同的view指定相同的資料對應位置。
這樣就完成布局切換了